<template>
  <div>
    <div>这是学生管理的页面~</div>
    <p></p>
    <button v-on:click="getAllStudents">获取所有学生</button>
    <div v-for="student in students" v-bind:key = student.id>
      {{student}}
    </div>
    <p></p>
    <div>
      请输入查询学生的id：
      <input v-model="queryId"/>
    </div>
    <button v-on:click="getStudentById">根据id获取指定学生信息</button>
    <div>{{studentById}}</div>
    <p></p>
    <div>
      请输入要添加的用户信息
      <div>
        student_id
        <input v-model="student_id">
      </div>
      <div>
        name
        <input v-model="name">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>

      <div>
        qq
        <input v-model="qq">
      </div>


    </div>
    <button v-on:click="add">添加用户信息</button>
    <p></p>
    <div>
      请输入要修改的用户信息

      <div>
        student_id
        <input v-model="student_id">
      </div>
      <div>
        name
        <input v-model="name">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>

      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="update">修改用户信息</button>
    <p></p>
    <div>
      请输入要删除的用户id
      <div>
        id
        <input v-model="deleteid">
      </div>

    </div>
    <button v-on:click="deleteById">删除用户信息</button>
  </div>

</template>

<script>
import axios from "axios";
  export default {
    name: "Student",

    data(){
      return{
        students: null,
        queryId:null,
        studentById:null,
        student_id:null,
        name:null,
        telephone:null,
        qq:null,
        id:null,
        deleteid:null

      }
    },
    methods: {
      getAllStudents(){
        axios.get("http://localhost:8082/students")
            .then(resp => {
              console.log(resp);
              this.students = resp.data;
            })
      },
      getStudentById(){
        axios.get(`http://localhost:8082/student/${this.queryId}`)
            .then(resp => {
              console.log(resp);
              this.studentById = resp.data;
            })
      },
      add(){
        axios.post("http://localhost:8082/student",
            {
              student_id:this.student_id,
              name: this.name,
              telephone: this.telephone,
              qq:this.qq
              })
            .then(resp => {
              console.log(resp);
            })
      },
      update(){
        axios.put("http://localhost:8082/student",
            {
              id:this.id,
              student_id:this.student_id,
              name: this.name,
              telephone: this.telephone,
              qq:this.qq})
            .then(resp => {
              console.log(resp);
            })
      },
            deleteById(){
          axios.delete("http://localhost:8082/student",{
            params:{
              id:this.deleteid}
          }).then(resp => {
            console.log(resp);
          })
        }

      }
    }
</script>

<style scoped>

</style>
